<template>
  <div class="SettingIcon">
    <icon-setting-config theme="outline" size="20" :strokeWidth="3" title="设置" @click="showMenu" class="setIcon" />

    <el-drawer v-model="drawer" direction="rtl" :size="200" :with-header="false">
      <div class="setList">
        <div class="setItem">
          <div class="left">
            <icon-platte theme="outline" size="20" :strokeWidth="3" />
            <span>主题</span>
          </div>
          <el-color-picker v-model="color" />
        </div>
        <div class="setItem">
          <ThemeIcon :isDark="isDark" />
          <el-switch v-model="isDark" active-color="#34d399" inactive-color="#e5e5e5" />
        </div>
        <div class="setItem">
          <div class="left">
            <icon-full-screen-one theme="outline" size="20" :strokeWidth="3" />
            <span>全屏</span>
          </div>
          <el-switch v-model="fullScreenState" active-color="#34d399" inactive-color="#e5e5e5" />
        </div>
      </div>
    </el-drawer>

    <MenuCard :show="show" @closeMenu="closeMenu"/>

  </div>
</template>

<script setup>
import MenuCard from '@/components/MenuCard.vue'// 菜单卡片
import ThemeIcon from "@/components/ThemeIcon.vue"; //主题切换
import { ref, watch } from "vue"
import { useDark } from "@vueuse/core";
// 切换黑夜模式
const isDark = useDark();
// 抽屉
let drawer = ref(false)
const showDialog = () => {
  drawer.value = true
}
// 菜单卡片
let show = ref(false)
const showMenu = () => {
  show.value = !show.value
}
// 点击卡片外区域关闭
const closeMenu = () => {
  show.value = false
}
// 主题颜色
const color = ref('#409EFF')
// 全屏状态
let fullScreenState = ref(false);
// 全屏方法
const fullScreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen(); // 退出全屏
  } else {
    document.documentElement.requestFullscreen(); // 开启全屏
  }
};
watch(fullScreenState, (val) => {
  fullScreen()
})
</script>

<style lang="less" scoped>
.SettingIcon {
  .setIcon {
    cursor: pointer;

    &:hover {
      color: #34d399;
    }
  }

  .setList {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .setItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;

      &:hover {
        color: #34d399;
      }

      .left {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
  }
}
</style>